<template>
	<div :class="{ hidden: hidden }" class="pagination-container !<sm:flex-col-reverse">
		<span class="text-[12px] <sm:mt-[20px]"> 共{{ total }}条数据 </span>
		<el-pagination
			:background="background"
			:current-page.sync="currentPage"
			:page-size.sync="pageSize"
			:layout="layouts"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="5"
			v-bind="$attrs"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to';
import { mapState } from 'vuex';
export default {
	name: 'Pagination',
	props: {
		total: {
			required: true,
			type: Number,
		},
		page: {
			type: Number,
			default: 1,
		},
		limit: {
			type: Number,
			default: 20,
		},
		pageSizes: {
			type: Array,
			default() {
				return [10, 20, 30, 50];
			},
		},
		layout: {
			type: String,
			default: 'prev, pager, next,sizes, jumper',
		},
		background: {
			type: Boolean,
			default: true,
		},
		autoScroll: {
			type: Boolean,
			default: true,
		},
		hidden: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		...mapState({
			device: (state) => state.app.device,
		}),
		layouts() {
			if (this.device === 'mobile') {
				return 'prev, pager, next';
			}
			return this.layout;
		},
		currentPage: {
			get() {
				return this.page;
			},
			set(val) {
				this.$emit('update:page', val);
			},
		},
		pageSize: {
			get() {
				return this.limit;
			},
			set(val) {
				this.$emit('update:limit', val);
			},
		},
	},
	methods: {
		handleSizeChange(val) {
			this.$emit('pagination', { page: this.currentPage, limit: val });
			if (this.autoScroll) {
				scrollTo(0, 800);
			}
		},
		handleCurrentChange(val) {
			this.$emit('pagination', { page: val, limit: this.pageSize });
			if (this.autoScroll) {
				scrollTo(0, 800);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.pagination-container {
	background: #fff;
	padding: 0 16px !important;
	height: auto;
	margin-bottom: 0;
	::v-deep {
		.el-pagination {
			display: flex;
			align-items: center;
		}

		.el-pagination.is-background .el-pager li,
		.el-pagination.is-background .btn-prev,
		.el-pagination.is-background .btn-next {
			margin: 0;
			border-radius: 0;
			background-color: #fff;
			color: #333;
		}
		.el-pagination.is-background .btn-prev,
		.el-pagination.is-background .btn-next {
			border: 1px solid #dde4ee;
		}

		.el-pagination.is-background .el-pager li {
			border-right: 1px solid #dde4ee;
			border-top: 1px solid #dde4ee;
			border-bottom: 1px solid #dde4ee;
			&:last-child {
				border-right: none;
			}
		}
		.el-pagination.is-background .el-pager li:not(.disabled).active {
			background-color: var(--primary-color);
			color: #ffffff;
			border-right: 1px solid var(--primary-color);
			border-top: 1px solid var(--primary-color);
			border-bottom: 1px solid var(--primary-color);
		}
		.el-pagination__sizes {
			margin: 0 8px 0 12px;
			display: flex;
			align-items: center;
			.el-select {
				display: flex;
				align-items: center;
				.el-input {
					width: 80px !important;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #dde4ee;
				}
				.el-input--mini .el-input__inner {
					font-size: 12px;
					height: 27px;
					line-height: 27px;
					text-align: left;
					padding: 0;
					width: 50px;
				}
				.el-input__inner {
					border: none;
				}
				.el-pagination .el-input__suffix {
					//right: 18px;
				}
			}
			.el-select > .el-input {
				display: flex;
			}
		}
		.el-pagination .el-select .el-input {
			margin: 0;
		}
		.el-pagination .el-select .el-input .el-input__inner {
			border-radius: 0;
		}
		.el-pagination__jump {
			display: flex;
			align-items: center;
			margin-left: 0;
			position: relative;
			.el-input {
				width: 30px !important;
				margin-right: 8px;
				font-weight: normal !important;
			}
			.el-input__inner {
				border-radius: 0;
				border: 1px solid #dde4ee;
				width: 30px;
				padding: 0;
			}
		}
	}
	@apply flex justify-between items-center mt-[24px];
}
.pagination-container.hidden {
	display: none;
}
</style>
